<template>
    <el-dialog :title="title" custom-class="el-dialog-600" v-model="visible">
        <el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
            <el-form-item label="菜单分类" prop="pid">
                <el-select v-model="form.pid" filterable clearable placeholder="请选择分类">
                    <el-option class="option-level0" label="顶级分类" :value="0"></el-option>
                    <el-option
                        v-for="item in tableList"
                        :key="item.id"
                        :class="'option-level' + item.level"
                        :label="item.level != 1 ? '└─' + item.name : item.name"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="菜单名称" prop="name">
                <el-col :span="23">
                    <el-input
                        clearable
                        v-model="form.name"
                        auto-complete="off"
                        placeholder="请输入菜单名称"
                    ></el-input>
                </el-col>
            </el-form-item>

            <el-form-item label="类型" prop="type">
                <el-select v-model="form.type" clearable placeholder="请选择类型">
                    <el-option
                        v-for="item in typeOption"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="图标" prop="icon" v-show="form.type == '' || form.type == 1">
                <el-col :span="23">
                    <el-input clearable v-model="form.icon" auto-complete="off"></el-input>
                </el-col>
            </el-form-item>

            <el-form-item
                label="API"
                prop="api"
                v-show="form.type == '' || form.type == 3 || form.type == 4"
            >
                <el-col :span="23">
                    <el-input clearable v-model="form.api" auto-complete="off"></el-input>
                </el-col>
            </el-form-item>

            <el-form-item label="路径" prop="path" v-show="form.type == '' || form.type == 2">
                <el-col :span="23">
                    <el-input clearable v-model="form.path" auto-complete="off"></el-input>
                </el-col>
            </el-form-item>

            <el-form-item label="权限" prop="code" v-show="form.type != 1">
                <el-col :span="23">
                    <el-input clearable v-model="form.code" auto-complete="off"></el-input>
                </el-col>
            </el-form-item>

            <el-form-item label="是否显示">
                <el-col :span="23">
                    <el-radio
                        clearable
                        v-model="form.display"
                        v-for="item in displayRadio"
                        :key="item.id"
                        :label="item.id"
                    >
                        {{ item.name }}
                    </el-radio>
                </el-col>
            </el-form-item>

            <el-form-item label="排序" prop="sort">
                <el-col :span="23">
                    <el-input clearable v-model.number="form.sort" auto-complete="off"></el-input>
                </el-col>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="visible = false"> 取 消 </el-button>
            <el-button type="primary" :loading="loading" @click="onSubmit"> 确 定 </el-button>
        </template>
    </el-dialog>
</template>

<script>
import { getCurrentInstance, ref, reactive, watch } from 'vue';
import Options from '@/global/local-data/system';
import { adminMenu as Api } from 'api';

export default {
    props: {
        tableList: {
            type: Array
        }
    },
    setup(props) {
        const { proxy } = getCurrentInstance();

        let tableType = ref(null); // 表单类型
        let id = ref(null); // 当前menu的id
        let loading = ref(false); //等待按钮
        let visible = ref(false); //弹窗开关
        let title = ref(null); // 标题
        // 下拉选项
        let typeOption = Options.menu.typeOption;
        let displayRadio = Options.menu.displayRadio;
        // 表单
        let form = reactive({
            pid: '',
            name: '',
            type: '',
            icon: '',
            api: '',
            path: '',
            code: '',
            display: 1,
            sort: 0
        });
        // 验证
        let rules = {
            pid: [{ required: true, message: '请选择分类', trigger: 'change' }],
            name: [
                { required: true, message: '请输入菜单名称', trigger: 'change' },
                { min: 2, max: 16, message: '字符长度2到16个字符', trigger: 'change' }
            ],
            type: [{ required: true, message: '请选择类型', trigger: 'change' }],
            icon: [{ max: 50, message: '最大长度50个字符', trigger: 'change' }],
            api: [{ max: 50, message: '最大长度50个字符', trigger: 'change' }],
            code: [{ max: 50, message: '最大长度50个字符', trigger: 'change' }],
            path: [{ max: 50, message: '最大长度50个字符', trigger: 'change' }],
            sort: [
                { type: 'number', message: '必须为数字', trigger: 'change' },
                { type: 'number', max: 9999, message: '排序最高不得超过9999', trigger: 'change' }
            ]
        };

        // 初始化
        const init = () => {
            title.value = tableType.value == 'edit' ? '编辑' : '新增';

            tableType.value == 'edit' ? getById() : (form.pid = id.value);
        };
        // 获取详情
        const getById = async () => {
            const { code, data } = await proxy.$http.get(Api.getById(id.value));

            if (code === 200) {
                form.pid = data.pid;
                form.name = data.name;
                form.type = data.type;
                form.code = data.code;
                form.icon = data.icon;
                form.api = data.api;
                form.path = data.path;
                form.display = data.display;
                form.sort = data.sort;
            }
        };
        // 提交表单
        const onSubmit = async () => {
            await proxy.$refs['formRef'].validate((valid) => {
                if (valid) loading.value = true;
            });
            if (loading.value) {
                let api = Api.add;
                let params = {
                    pid: form.pid,
                    name: form.name,
                    type: form.type,
                    code: form.code,
                    icon: form.icon,
                    api: form.api,
                    path: form.path,
                    display: form.display,
                    sort: form.sort
                };

                if (tableType.value === 'edit') {
                    api = Api.update;
                    params.id = id.value;
                }

                const { code, msg, data } = await proxy.$http.post(api, params);
                if (code === 200) {
                    proxy.$msg.success(msg);
                    proxy.$parent.getList(form.pid);
                    visible.value = false;
                } else {
                    proxy.$msg.warning(msg ? msg : data);
                }

                loading.value = false;
            }
        };

        // 监听弹窗开关
        watch(visible, (newVal, oldVal) => {
            newVal ? init() : proxy.$refs['formRef'].resetFields();
        });

        return {
            tableType,
            id,
            loading,
            visible,
            title,
            typeOption,
            displayRadio,
            form,
            rules,
            onSubmit
        };
    }
};
</script>
